<template>
  <wd-calendar
    v-model="date"
    custom-class="custom-calendar"
    use-default-slot
    allow-same-day
    type="daterange"
    @confirm="handleConfirm"
    @cancel="emitConfirm()"
    :formatter="calendarConfig.formatter"
    :min-date="calendarConfig.minDate"
    :max-date="calendarConfig.maxDate"
    :title="calendarConfig.title"
    :innerDisplayFormat="calendarConfig.innerDisplayFormat"
    :z-index="9999"
  >
    <slot />
  </wd-calendar>
</template>
<script setup lang="ts">
import { ref } from 'vue'
import dayjs from 'dayjs'
import { calendarConfig, getRoomNight, dateTransformText } from './utils'

defineOptions({ name: 'Calendar' })

const props = defineProps({
  // 默认日期
  dDate: {
    type: Object,
    default: () => ({}),
  },
  more: {
    type: String,
    default: '',
  },
})

// 提交到外部的方法
const emit = defineEmits(['confirm'])

// 设置默认选择日期
const date = ref([])
if (props.dDate && props.dDate.startDate && props.dDate.endDate) {
  date.value = [
    new Date(props.dDate.startDate as number).getTime(),
    new Date(props.dDate.endDate as number).getTime(),
  ]
} else {
  const day = dayjs().hour(0).minute(0).second(0)
  // 如果没有配置默认日期，则选择今天明天
  date.value = [
    new Date(day.format()).getTime(),
    new Date(day.format()).getTime() + 3600 * 24 * 1000,
  ]
}

emitConfirm() // 将默认时间提交到外部

// 日期确认
function handleConfirm({ value }) {
  date.value = value
  emitConfirm()
}

// 提交数据到外部
function emitConfirm() {
  emit('confirm', {
    // 原始日期数据
    date: date.value,
    // 开始日期
    startDate: dayjs(date.value[0]).format('YYYY-MM-DD'),
    // 开始日期文字
    startDateText: dateTransformText(date.value[0]),
    // 结束日期
    endDate: dayjs(date.value[1]).format('YYYY-MM-DD'),
    // 结束日期文字
    endDateText: dateTransformText(date.value[1]),
    // 间夜信息
    roomNight: getRoomNight(date.value[0], date.value[1]),
  })
}
</script>
